<template>
    <div class="bg-white rounded-8px">
      <div class="p-30px text-24px font-600 border border-top-0 border-left-0 border-right-0">考试大纲</div>
      <div class="p-30px">
        <el-tree
            style="max-width: 900px"
            :data="listData"
            :props="defaultProps"
            @node-click="handleNodeClick"
        >
            <template #default="{ node }">
                <!-- 动态绑定样式 -->
                <div :class="node.level == 1 ? 'text-16px font-500 text-dark-500': 'text-14px font-400'">
                    {{ node.label }}
                </div>
            </template>
        </el-tree>
      </div>
    </div>
    
  </template>
  <script setup>
    import { useUserStore } from '../../stores/user'
    import { configStore } from '../../stores/config'
    import { systemApi,userApi,httpApi } from '../../api/api'
    import { ElMessage } from 'element-plus'
    import { ref,onMounted,watch } from "vue"
    import { diffTwoDates,getToday } from '../../utils/tool'
    import { useRouter } from 'vue-router';
    
    import { Plus } from '@element-plus/icons-vue'
    
    const config = configStore();
    const lessonData = ref({})
    let listData = ref([])
    const router = useRouter();
   
    const init = async ()=>{
        lessonData.value = config.getBook()
        let res = await httpApi.getOutlineList(lessonData.value)
        console.log(res)
        if(res.code){
            listData.value = res.data
            console.log("数据",listData.value)
        }

    }
    const handleNodeClick = (data) => {
        console.log(data)
        
        if(data.teaching_id){
            let temp = {
                teaching_id:data.teaching_id
            }
            config.setCurrentOpen(temp)
            router.push({
                path: '/book/book/1' //默认跳转到原版教材
            });
        }

    }
    
    const defaultProps = {
        children: 'children',
        label: 'title',
        }
    // 科目变化时加载
    watch(() => config.$state.currentBook.book_id, () => {
        init()
    })

    onMounted(()=>{
        init();
    })
  </script>